// JavaScript Document
/**
	注凡是以$开头的均为jquery对象，否则为js对象(其中$ali[i]这样的均为js对象),以a开头的变量为数组，
	o开头的变量为单个元,js对象加$(),即为jquery对象
	
	**/
	
	$(function(){
			var $box=$("#box");
			var ul=$("ul")[0];
			//将js对象转换为jquery对象
			var $ul=$(ul);
			//动态的增加li即为标题
			for(var i=0;i<10;i++)
			{
				var oli=document.createElement("li");
				var oA=document.createElement("a");
				oA.href="#";
				oA.innerHTML="jquery浅谈";
				oli.appendChild(oA);
				$ul.append(oli);
			}
			//给每一个标题后面加div其中div中存储日志内容
			var $ali=$("li");
			//alert($ali.length);
			for(var i=0;i<$ali.length;i++)
			{
				var oDiv=document.createElement("div");
				oDiv.style.width="98%";
				oDiv.style.margin="auto";
				oDiv.style.border="1px solid #2d2d2d";
				oDiv.innerHTML="哈哈哈，终于快完了，快夸我！！！！！";
				oDiv.style.fontSize="18px";
				oDiv.style.fontWeight="500";
				oDiv.style.borderRadius="10px";
				oDiv.style.display="none";
				$ali[i].insertBefore(oDiv,$ali[i].nextsibling);
			}
			//点击那个li标题，底下出现所对应的日志
			var $aDiv=$(ul.getElementsByTagName("div"));
			//alert($aDiv.length);
			for(var i=0;i<$aDiv.length;i++)
			{	
				$ali[i].index=i;
				$ali[i].onclick=function(){
  /**
  1.先进来判断当前块的属性，一开始为none,先全部清空再把当前块展示出来
  2.当再次点击同一个按钮时判断到当前是block状态，便把他变为none隐藏
  3.当点击别的按钮，这个按钮为隐藏，我们先把其他全变为none,再把当前这个按钮控制的块显示出来
  **/
					if($aDiv[this.index].style.display=="none")
					{	
						for(var i=0;i<$aDiv.length;i++)
						{
							$aDiv[i].style.display="none";
						}
						
						if($aDiv[this.index].style.display=="none")
						{
							$aDiv[this.index].style.display="block";
							
						}
						
					}
					else
					{
						$aDiv[this.index].style.display="none";
					}
				
					
					
				}
			}
	});
	